/*=============================
  Utilities
=============================*/

// Position
.position-relative
  position: relative

.position-absolute
  position: absolute

.position-fixed
  position: fixed

// Text
.text-left
  text-align: left;

.text-center
  text-align: center;

.text-right
  text-align: right;

// Sizing
.size-full-height
  min-height: 100vh

.size-full-width
  width: 100%

.size-full
  width: 100%
  min-height: 100vh

// Visibility
.hidden
  display: none

// Flexbox Utilities
.flex
  display: flex

.justify-start
  justify-content: flex-start

.justify-center
  justify-content: center

.justify-end
  justify-content: flex-end

.align-start
  align-items: flex-start

.align-center
  align-items: center

.align-end
  align-items: flex-end

.direction-vertical
  flex-direction: column

.direction-horizontal
  flex-direction: row

.center
  flex-direction: column
  justify-content: center
  align-items: center

// Borders
.border-black
  border(color-black)

.border-gray
  border(color-gray)

.border-white
  border(color-white)

.border-blue
  border(color-blue)

.border-red
  border(color-red)

.border-yellow
  border(color-yellow)

.border-green
  border(color-green)

.border-rounded
  border-radius()

.border-circle
  border-radius: 50%

// Colors
.color-black
  color: color-black

.color-gray
  color: color-gray

.color-white
  color: color-white

.color-blue
  color: color-blue

.color-red
  color: color-red

.color-yellow
  color: color-yellow

.color-green
  color: color-green

// Backgrounds
.background-black
  background-color: color-black

.background-gray
  background-color: color-gray

.background-white
  background-color: color-white

.background-blue
  background-color: color-blue

.background-red
  background-color: color-red

.background-yellow
  background-color: color-yellow

.background-green
  background-color: color-green
